<template>
  <div class="insurance">
    <el-container>
      <el-main>
        <el-card style="margin-bottom:20px;height: 80px">
          <el-col :span="12">
            <div class="grid-content bg-purple" style="float: left">
              <el-input
                style="width: 300px"
                v-model="mySearchdata.safeName"
                placeholder="请输入姓名"
              ></el-input>
              <el-button
                type="primary"
                @click="mysearch(mySearchdata)"
                style="margin-left:10px "
                >查询</el-button
              >
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple" style="float: right">
              <router-link :to="{ path: '/insuranceAdd' }">
                <el-button type="primary">添加表单</el-button>
              </router-link>
            </div>
          </el-col>
        </el-card>
        <el-row>
          <el-col :span="24"
            ><div class="grid-content bg-purple">
              <el-table
                class="mybxtable"
                border
                :data="dataTable"
                style="width: 100%"
                :header-cell-style="headClass"
                :cell-style="rowClass"
              >
                <el-table-column
                  prop="safeName"
                  label="被保险人姓名"
                ></el-table-column>
                <el-table-column
                  prop="safePhone"
                  label="手机号"
                ></el-table-column>
                <el-table-column
                  prop="safeQtdate"
                  label="交强起始时间"
                ></el-table-column>
                <el-table-column
                  prop="safeQodate"
                  label="交强终止时间"
                ></el-table-column>
                <el-table-column
                  prop="safeStdate"
                  label="商业起始时间"
                ></el-table-column>
                <el-table-column
                  prop="safeSodate"
                  label="商业终止时间"
                ></el-table-column>
                <el-table-column
                  prop="safeInformation_price"
                  label="保险价格(元)"
                ></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      @click="
                        dialogVisible = true;
                        mysafe = { ...scope.row };
                      "
                      >修改</el-button
                    >

                    <el-button type="danger" @click="mydelete(scope.row.safeId)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <div class="block">
                <el-pagination
                  layout="prev, pager, next"
                  :total="this.pagingt.pages * 10"
                  @current-change="mypage"
                >
                </el-pagination>
              </div></div
          ></el-col>
        </el-row>
        <el-row>
          <el-dialog title="修改表单" :visible.sync="dialogVisible" width="30%">
            <span>被保险人姓名:</span>
            <el-input v-model="mysafe.safeName"></el-input>
            <span>手机号:</span>
            <el-input v-model="mysafe.safePhone"></el-input>
            <span>交强起始时间:</span>
            <el-date-picker
              type="date"
              v-model="mysafe.safeQtdate"
              value-format="yyyy-MM-dd"
            ></el-date-picker
            ><br />
            <span>交强终止时间:</span>
            <el-date-picker
              type="date"
              v-model="mysafe.safeQodate"
              value-format="yyyy-MM-dd"
            ></el-date-picker
            ><br />
            <span>商业起始时间</span>
            <el-date-picker
              type="date"
              v-model="mysafe.safeStdate"
              value-format="yyyy-MM-dd"
            ></el-date-picker
            ><br />
            <span>商业终止时间</span>
            <el-date-picker
              type="date"
              v-model="mysafe.safeSodate"
              value-format="yyyy-MM-dd"
            ></el-date-picker
            ><br />
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="myalter(mysafe)"
                >确 定</el-button
              >
            </span>
          </el-dialog>
        </el-row>
      </el-main>
      <el-footer> </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "insurance",
  data() {
    return {
      mySearchdata: {
        page: "1",
        limit: "5"
      },
      dataTable: [],
      form: [{}],
      paging: {
        page: "1",
        limit: "5"
      },
      pagingt: {},
      dialogVisible: false,
      mysafe: {}
    };
  },
  methods: {
    rowClass() {
      //表格数据居中显示
      return "text-align:center";
    },
    headClass() {
      //表头居中显示
      return "text-align:center";
    },
    mytable() {
      this.$axios
        .post(this.$api.insurance.findAllByPage, this.paging, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          console.log(response.data);
          if (response.status === 200) {
            this.dataTable = response.data.data.list;
            this.pagingt.pages = response.data.data.pages;
          }
        })
        .catch(error => {
          alert(error);
        });
    },
    mysearch(dt) {
      this.$axios
        .post(this.$api.insurance.findBy, dt, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          if (response.status === 200) {
            console.log(response);
            this.dataTable = response.data.data.list;
            alert("查找成功");
          }
        })
        .catch(error => alert(error));
    },
    mydelete(dt) {
      this.$axios
        .post(
          this.$api.insurance.delete,
          { safeId: dt },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          if (response.status === 200) {
            this.mytable();
          }
        })
        .catch(error => alert(error));
    },
    myalter(dt) {
      this.$axios
        .post(this.$api.insurance.update, dt, {
          //
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          console.log(response.data);
          if (response.status === 200) {
            this.mytable();
            this.$message.success("修改成功");
          }
        })
        .catch(error => {
          alert(error);
        });
      this.dialogVisible = false;
    },
    mypage(dt) {
      this.paging.page = dt;
      this.mytable();
    }
  },
  created() {
    this.mytable();
  }
};
</script>

<style></style>
